<template>
	<div>
		<Layout>
			<Content class="layout-content">
				<Row>
					<Col span="24">
						<!--            <div id="jsoneditor" ref="jsonEditor" style="width: 100%; height: 600px;"></div>-->
						<ParamDefine
							v-if="props.componentConfig?.input"
							:params="props.componentConfig?.input"
							:isViewBasicFieldFlag="false"
							:isViewArrayFlag="true"
							:isAddColumnFlag="true"
							:isActionColumnFlag="true"
							:isUpdateColumnFlag="true"
							:jsonEditorFlag="true"
							:isClearFlag="true"
							:isRemoveColumnFlag="true"
							:isAddChildrenColumnFlag="true"
							:isMappingColumnFlag="false"
							ref="left"
						></ParamDefine>
					</Col>
				</Row>
			</Content>
		</Layout>
	</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import ParamDefine from '@/views/restapi/ParamDefine.vue'

const defaultConfig = () => {
	return {
		input: {
			params: [],
			basicTypeFlag: false,
			isArrayFlag: false,
			isActionColumnFlag: false,
			isMappingColumnFlag: false
		}
	}
}
const props = defineProps(['componentConfig'])

onMounted(() => {
	if (!hasProperties(props.componentConfig)) {
		const c = defaultConfig()
		props.componentConfig.input = c.input
	}
})

const hasProperties = (obj) => {
	if (!obj) {
		return false
	}

	return JSON.stringify(obj) != '{}'
}

// const isArrayFlag = ref(false);
const left = ref()

// const params = ref({
// 	input: {
// 		params: [],
// 		basicTypeFlag: false,
// 		isArrayFlag: false
// 	}
// })
</script>
<style scoped>
</style>
